<template>
  <div style="height: 6000px;">
    <vue3-tree-org
      ref="org"
      :data="data"
      :horizontal="true"
      :collapsable="true"
      :tool-bar="false"
      :scalable="false"
      :node-draggable="false"
      :default-expand-level="1"
      :define-menus="defineMenus"
      @on-contextmenu="onMenus"
      :label-style="{ minWidth: '100px' }"
      :node-add="(e) => $emit('on-add', e)"
      :node-edit="(e) => $emit('on-edit', e)"
    >
      <template v-slot="{node}">
        <div class="tree-org-node__text node-label" style="min-width: 150px">
          <div v-if="node['$$level']==1">
            {{node.label}}
            <div v-if="node['$$data'].online" style="color: lime"> (在线)</div>
            <div v-if="!node['$$data'].online"> (离线)</div>
          </div>
          <div v-else-if="node['$$level']==0">
            {{node.label}}
          </div>
          <div v-else-if="node['$$level']==2">
            {{node.label}}
          </div>
          <div v-else>{{'sensor'+node.label}}(通道：{{node['$$data'].channel}})</div>
        </div>
      </template>
    </vue3-tree-org>
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  data() {
    return {
      data: {
        id: 1,
        label: '项目',
        children: [],
        level: 0,
      },
      current_id: null,
    };
  },
  methods: {
    setProject(prj) {
      this.current_id = prj.id;
      this.data = prj;
    },
    defineMenus(e, node) {
      const level = node['$$level'];
      console.log(node)

      if (level === 0) {
        return [
          { name: '新建', command: 'add' },
          { name: '绑定', command: 'bind' },
        ];
      }
      if(level ===2  && node["$$data"]['typeId']!= undefined &&node["$$data"]['typeId']!= null && node["$$data"]['typeId']== 7){
        return [
          { name: '编辑', command: 'edit' },
          { name: '删除', command: 'delete' },
        ];
      }
      if (level === 3 ) {
        return [
          { name: '编辑', command: 'edit' },
          { name: '删除', command: 'delete' },
        ];
      }
      return [
        { name: '新建', command: 'add' },
        { name: '编辑', command: 'edit' },
        { name: '删除', command: 'delete' },
      ];
    },
    onMenus({ node, command }) {
      this.current_id = node.id;
      if (command === 'bind') {
        this.$router.push(`/project/bind/${node.id}`);
        return;
      }
      return this.$emit(command, node);
    },
    addDtu(form) {
      form.pid = this.current_id;
      form.level = 1;
      form.label = form.name;
      this.data.children.push(form);
    },
    addHub(form) {
      form.pid = this.current_id;
      form.level = 2;
      form.label = form.name;
      this.data.children = this.data.children.map((item) => {
        if (item.id === this.current_id) {
          item.children.push(form);
        }
        return item;
      });
    },
    addSensor(form) {
      form.pid = this.current_id;
      form.level = 3;
      form.label = form.code;
      this.data.children = this.data.children.map((item) => {
        item.children = item.children.map((item2) => {
          if (item2.id === this.current_id) {
            item2.children.push(form);
          }
          return item2;
        });
        return item;
      });
    },
  },
});
</script>
<style lang="less" scoped>
.tree-org-node__text {
  text-align: left;
  font-size: 14px;
  .custom-content {
    padding-bottom: 8px;
    margin-bottom: 8px;
    border-bottom: 1px solid currentColor;
  }
}
</style>
